<template>
  <el-menu
      class="el-menu-vertical-demo"
      :collapse= 'isCollapse'
      router
  >
<!--    静态首页-->
    <el-menu-item index="index">
      <i class="iconfont icon-qcsystem" style="margin-right:10px"></i>
      <span slot="title">首页</span>
    </el-menu-item>
    <el-menu-item index="/test" @click="test">
      <i class="el-icon-menu"></i>
      <span slot="title">测试</span>
    </el-menu-item>

    <el-submenu :index="item.title" v-for="item in menuList" :key="item.path">
      <template slot="title">
        <i :class='item.icon' class="iconfont" style="margin-right:10px"></i>
        <span slot="title">{{item.title}}</span>
      </template>
      <el-menu-item-group>
        <el-menu-item :index="subItem.path" v-for="(subItem,subIndex) in item.children" :key="subIndex">
          <i class="iconfont" :class='subItem.icon' style="margin-right:10px"></i>
          <i class="iconfont" ></i>
          <span slot="title">{{subItem.title}}</span>
        </el-menu-item>
      </el-menu-item-group>
    </el-submenu>







  </el-menu>
</template>

<script>
import store from '@/store/index'

export default {
  data() {
    return {
        menus: []
    };
  },
  methods: {
    test() {
      // console.log("菜单数据",store.state.common.menuList)ya
      this.$http({
        url: 'sys/two',
        method: 'post'
      })
    },
    getMenu(){
      this.$http({
        url: 'sys/menu/getMenu',
        method: 'post',
        data: this.$http.adornData({
          id: sessionStorage.getItem("roleId")
        })
      }).then((res)=>{
        // console.log(res)
        store.commit("setMenuList",res.data.menu)

      })
    },

  },
  computed: {
    isCollapse(){
      return store.state.common.asideStatus
    },
    menuList(){
      return store.state.common.menuList
    }
  },


  created() {
    this.getMenu()
  },




}

</script>
<style scoped>
.el-menu-vertical-demo:not(.el-menu--collapse) {

  min-height: 400px;
  height: 100%;
  width: 200px;
  /*background-color: red;*/
}
</style>

